<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片右下角标签示例</title>
    <style>
        /* 容器样式 */
        .image-container {
            position: relative; /* 作为标签的定位参考 */
            display: inline-block; /* 容器大小适应图片 */
            margin: 20px; /* 外间距，方便查看效果 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 可选：添加阴影增强立体感 */
        }

        /* 图片样式 */
        .product-image {
            max-width: 400px; /* 限制最大宽度，可根据需要调整 */
            height: auto; /* 保持图片比例 */
            display: block; /* 去除图片底部默认空白 */
        }

        /* 右下角标签样式 */
        .corner-label {
            position: absolute; /* 绝对定位 */
            bottom: 10px; /* 距离底部10px */
            right: 10px; /* 距离右侧10px */
            background-color: #ff4d4f; /* 红色背景 */
            color: white; /* 白色文字 */
            padding: 4px 10px; /* 内边距 */
            border-radius: 4px; /* 圆角 */
            font-family: Arial, sans-serif; /* 字体 */
            font-size: 14px; /* 文字大小 */
            font-weight: bold; /* 加粗 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 标签阴影 */
        }
    </style>
</head>
<body>
    <!-- 图片和标签容器 -->
    <div class="image-container">
        <img src="../img/杨乖乖.jpg" alt="图片" class="product-image">
        <span class="corner-label">❤</span>
    </div>


</body>
</html>
